<template>
  <div>
   <el-radio-group v-model="collect" style="margin-bottom: 30px;">
    <el-radio-button :label="false" @click.native ='getImages' >全部</el-radio-button>
    <el-radio-button :label="true" @click.native='getImageCollect' >收藏</el-radio-button>
  </el-radio-group>
  <el-button
  type="success" class="button" @click="uploadimage"
  >上传素材</el-button>
  <el-row :gutter="20">
    <el-col 
     :span='4.2'
     v-for="item in imgaeinfo" :key="item.id">
      <img class="image" :src="item.url">
      <div class="imgbottom">
        <el-button 
          @click="collectevent(item)"
          :icon="iscollect ? 'iconfont icon-shoucang-copy':'iconfont icon-shoucang'"
          type="warning"
          circle
          size="small"
          :plain='true'
        ></el-button>
         <el-button 
         @click='romveevent(item.id)'
          icon="iconfont icon-shanchu"
          type="danger"
          circle
          size="small"
          :plain='true'
        ></el-button>
      </div>
     </el-col>
  </el-row>
  <!-- 分页功能 -->
  <el-pagination
  @current-change="handleCurrentChange"
  background
  layout="prev, pager, next"
  :total="(Pagenum)">
</el-pagination>
<!-- 对象框 -->
<el-dialog
  title="上传图片素材"
  :visible.sync="dialogVisible"
  width="21%">
  <!-- 图片上传 -->
  <el-upload
  class="avatar-uploader"
  action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
  drag
  multiple
  name="image"
  :show-file-list="false"
  :headers="uploadHeaders"
  :on-success="handleAvatarSuccess">
   <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-dialog>
  </div>
</template>

<script>
  export default {
     name:'image-list',
     data () {
       const token =window.sessionStorage.getItem('token')
       return {
         uploadHeaders:{
           Authorization:`Bearer ${token}`
         },
         dialogVisible:false,
         collect:false,
         imgaeinfo:[],
         iscollect:false,
         Pagenum:0,
         page:1,
         imageUrl:''
       }
     },
     created () {
       this.getImagesinfo()
     },
     methods: {
       //获取全部图片
       async getImagesinfo(){
         let res =await  this.$http.get('/mp/v1_0/user/images',{
           params:{
             page:this.page,
             per_page:10
           }
         })
         this.imgaeinfo=res.data.data.results
         this.Pagenum = res.data.data.total_count
       },
       getImages(){
         this.getImagesinfo()
       },
      //获取收藏图片信息
      async  getImageCollect(){
          let res =await  this.$http.get('/mp/v1_0/user/images',{
           params:{
             collect:true,
             page:this.page,
             per_page:10
           }
         })  
         this.imgaeinfo=res.data.data.results
         this.Pagenum = res.data.data.total_count
         this.iscollect = true
        //  console.log(res)
      },
       //分页跳转功能
       handleCurrentChange(val){
         this.page = val
         this.getImagesinfo()
       },
       //收藏图片的功能
       async collectevent(img){
         if(!img.is_collected){
          let  res = await  this.$http({
           method:'put',
           url:`/mp/v1_0/user/images/${img.id}`,
           data:{
              collect:true
           }
         })
         this.getImageCollect()
         this.$message({
           showClose: true,
           message: '收藏成功',
           type: 'success'
         });
         }else{
          let  res = await  this.$http({
           method:'put',
           url:`/mp/v1_0/user/images/${img.id}`,
           data:{
              collect:false
           }
         })      
         this.getImageCollect()
          this.$message({
           showClose: true,
           message: '取消收藏成功',
           type: 'success'
         });
         }                     
       },
       //删除图片
       async romveevent(id){
         let res  =  await this.$http({
           method:'delete',
           url:`/mp/v1_0/articles/${id}`,

         })
           this.$message({
           showClose: true,
           message: '删除成功',
           type: 'success'
         })
         },
       //上传素材
       uploadimage(){
         this.dialogVisible = true
       },
       //图片上传
      handleAvatarSuccess() {
       this.dialogVisible=false
       this.getImagesinfo()
        this.$message({
           showClose: true,
           message: '上传照片成功',
           type: 'success'
         });
      }
      
    }
     }
  
</script>
<style lang="less" scoped>
.button{
  position: relative;
  left: 1300px;
  top: -15px;
}
.image{
  margin: 10px 0 0 20px;
  border-radius: 5px;
  width: 270px;
  height: 250px;
}

.imgbottom{
  display: flex;
  justify-content: center;
  width: 270px;
  height: 40px;
  color: #fff;
  background-color: rgba(204, 204, 204, .5);
  position: relative;
  top:-43px;
  margin-left: 20px;
  border-radius: 5px;
  .el-button{
    // position: relative;
    // top: 0;
    margin:  0 20px 0 20px;
  }
}
.el-pagination{
  margin: 30px 0  0  800px;
}
  
</style>